<template>
  <div>
    <el-input
        style="width: 20vw"
        @keyup.enter.native="handleArticleChange"
        prefix-icon="el-icon-search"
        v-model="article.keyWords"
        size="small"
        placeholder="输入 文章标题 搜索"/>
    <el-button size="small" @click="cancel">取消</el-button>
    <el-table :border="true" :data="article" stripe style="width: 100%">
      <el-table-column prop="articleTitle" label="文章标题" width="180" header-align="center" align="center">
      </el-table-column>

      <el-table-column prop="nickname" label="作者昵称" width="150" header-align="center" align="center">
      </el-table-column>

      <el-table-column label="作者删除否" width="100" header-align="center" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.isDelete?'已删除':'未删除'" placement="top">
            <el-switch v-model="scope.row.isDelete" @change="updateArticleSwitch(scope.row)"
                       active-color="#67C23A" inactive-color="#8c979e">
            </el-switch>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="文章分类" width="180" header-align="center" align="center">
        <template slot-scope="scope">
          <el-tag effect="plain">{{scope.row.categoryName}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="是否为草稿" width="100" header-align="center" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.isDraft?'YES':'NO'" placement="top">
            <el-switch v-model="scope.row.isDraft" @change="updateArticleSwitch(scope.row)"
                       active-color="#67C23A" inactive-color="#8c979e">
            </el-switch>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="是否私有" width="100" header-align="center" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.isPrivate?'私有':'公开'" placement="top">
            <el-switch v-model="scope.row.isPrivate" @change="updateArticleSwitch(scope.row)"
                       active-color="#67C23A" inactive-color="#8c979e">
            </el-switch>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column prop="createTime" width="130" label="创建时间" header-align="center" align="center">
      </el-table-column>

      <el-table-column prop="updateTime" width="130" label="最近修改时间" header-align="center" align="center">
      </el-table-column>

      <el-table-column label="操作" header-align="center" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="upToArticle(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        background
        @current-change="handleArticleChange"
        :current-page.sync="paging.currentPage"
        :page-size="paging.pageSize"
        layout="prev, pager, next"
        :total="paging.total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  methods: {
    upToArticle(ar){
      this.$router.push({path:"/article-update/"+ar.id,query:ar})
    },
    updateArticleSwitch(ar){
      console.log(ar)
      this.putRequest(this.api.article, {
        id:ar.id,
        isDelete: ar.isDelete,
        isDraft: ar.isDraft,
        isPrivate: ar.isPrivate,
      }).then(res => {
        if (res) {
          this.$message.success(res.message)
        }
      })
    },
    cancel(){
      this.article.keyWords=''
      this.handleArticleChange()
    },
    handleArticleChange() {
      this.postRequest(this.api.article+"getArticles", this.paging).then(res => {
        console.log(res)
        if (res){
          this.article.total=res.data.count
          this.article=res.data.object
        }
      })
    },
  },
  data() {
    return {
      paging: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        keyWords:"",
      },
      article: [],
      flag: true
    }
  },
  mounted() {
    this.handleArticleChange()
  }
}
</script>

<style scoped>
.el-pagination {
  margin-top: 2vh;
  text-align: center;
}
</style>